
import React,{Fragment} from "react";
import {Alert, Form, message, Modal} from "antd";
import service from "../../libs/request";
import store from "../../pages/generate/ordinary/Store";
import ActionForm from "./ActionForm";
import ActionFormTable from "./ActionFormTable";
import ActionFormStore from "./ActionFormStore";
import ActionFormMyXuanJian from "./ActionFormMyXuanJian";
import ActionDetail from "./ActionDetail";
import ActionImport from "./ActionImport";
import FormMyXuanJianStore from "../../stores/FormMyXuanJianStore"
import FormStore from "../../stores/FormStore"
import FormJsStore from "../../stores/FormJsStore"
import FormatRaw from "../formater/FormatRaw";
import {observer} from "mobx-react";

@observer
class ActionModal extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            loading:false,
            contentType:null,
            config:null,
            visible_test:{
                test:false,
                data:{
                    title:"",
                    body:""
                },
                params:{}
            },
            formSubmitUri:null,
            table_config:null,
            table_configs:[],
            js_actions:[],
            store_config:{
                fields:[]
            },
            data:{},
            formSubmitTest:false
        };
        this.configUri = props.configUri;
        this.configParams = props.configParams;

        FormJsStore.setFrom(props.form);
    }

    componentDidMount() {
        if (!this.configUri){
            message.error("配置地址不能为空");
        }else {
            service.request({
                url:this.configUri,
                method:"get",
                params:this.configParams,
            }).then(response => {

                if (response.data.code === 200){
                    this.setState({
                        contentType: response.data.type,
                        config: response.data.config,
                        formSubmitUri: response.data.formSubmitUri,
                        data:response.data.data,
                        table_config:response.data.table_config,
                        table_configs:response.data.table_configs,
                        store_config:response.data.store_config,
                        formSubmitTest:response.data.formSubmitTest,
                    });
                    if(response.data.add_config){
                        FormMyXuanJianStore.updateConfig(response.data.add_config)
                    }
                    if(response.data.js_actions){
                        FormJsStore.setActions(response.data.js_actions)
                    }
                }

            })
        }
    }

    closeTest = () =>{
        let visible_test = { test: false };
        let old_visible_test = this.state.visible_test;
        this.setState({
            visible_test: {
               ...old_visible_test, ...visible_test
            }
        });
    };

    handleOk = () => {
        this.closeTest();
        let formData = this.state.visible_test.params;
        this.setState({loading: true});
        service.request({
            url:this.state.formSubmitUri,
            method:"post",
            data:formData,
        }).then(response => {
            if (response.data.code === 200){
                store.fetchRecords();
                //关闭弹窗
                store.modalVisible = false;
            }
        }).finally(() => {this.setState({loading: false})});
    };

    handleCancel = () => {
        FormJsStore.cleanOptions();
        this.closeTest();
    };

    handleFormSubmit = () => {
        console.log("handleFormSubmit")
        if (!this.state.formSubmitUri){
            message.error("表单提交地址缺失")
        }else {
            if(this.state.formSubmitTest){
                this.props.form.validateFields((err, formData) => {
                    let TestFormData;
                    if (!err){
                        this.setState({loading: true});
                        formData['id'] = store.record.id;
                        TestFormData = { ...formData };
                        TestFormData["form_test_type"] = "test";
                        service.request({
                            url:this.state.formSubmitUri,
                            method:"post",
                            data:TestFormData,
                        }).then(response => {
                            if (response.data.code === 200){
                                this.setState({
                                    visible_test: {
                                        test:true,
                                        params:formData,
                                        data:{
                                            title:response.data.title,
                                            body:response.data.msg,
                                        }
                                    }
                                });
                            }
                        }).finally(() => {this.setState({loading: false})});
                    }
                });
            }else {
                this.props.form.validateFields((err, formData) => {
                    if (!err){
                        this.setState({loading: true});
                        formData['id'] = store.record.id;
                        service.request({
                            url:this.state.formSubmitUri,
                            method:"post",
                            data:formData,
                        }).then(response => {
                            if (response.data.code === 200){
                                store.fetchRecords();
                                //关闭弹窗
                                store.modalVisible = false;
                            }
                        }).finally(() => {this.setState({loading: false})});
                    }
                });
            }
        }
    };

    render() {
        return (
            <Fragment>
                {
                    store.modalConfig["footer"] === false ?
                        <Modal
                            footer={null}
                            visible
                            width={store.modalConfig["width"] ? store.modalConfig["width"] : 800}
                            {...(store.modalConfig["maskClosable"] !== undefined ? { maskClosable: store.modalConfig["maskClosable"] } : {})}
                            title={store.modalConfig["title"] ? store.modalConfig["title"] : "弹窗标题"}
                            okText={store.modalConfig["okText"] ? store.modalConfig["okText"] : "确定"}
                            cancelText={store.modalConfig["cancelText"] ? store.modalConfig["cancelText"] : "取消"}
                            onCancel={() => store.modalVisible = false}
                            confirmLoading={this.loading}
                            onOk={this.handleFormSubmit}>
                            {
                                store.modalConfig["alert"] &&  <Alert closable showIcon type={store.modalConfig["alert"] && store.modalConfig["alert"]["type"] ? store.modalConfig["alert"]["type"] : "info"} message={store.modalConfig["alert"] && store.modalConfig["alert"]["message"] ? store.modalConfig["alert"]["message"] : "小提示"}
                                                                                 style={{width:store.modalConfig["alert"] && store.modalConfig["alert"]["width"] ? store.modalConfig["alert"]["width"] : 600, margin: '0 auto 20px', color: '#31708f !important'}}
                                                                                 description={store.modalConfig["alert"] && store.modalConfig["alert"]["description"] ? store.modalConfig["alert"]["description"] : "提示信息"}/>
                            }

                            {this.state.contentType === "FORM" && <ActionForm form_store={FormStore} js_store={FormJsStore} form={this.props.form} config={this.state.config} />}
                            {this.state.contentType === "DETAIL" && <ActionDetail config={this.state.config} data={this.state.data}/>}
                            {this.state.contentType === "IMPORT" && <ActionImport url={this.configUri} params={this.configParams} config={this.state.config} data={this.state.data}/>}
                            {this.state.contentType === "RAW" && <FormatRaw record={this.state.data}/>}
                            {this.state.contentType === "FORM_TABLE" && <ActionFormTable form={this.props.form} config={this.state.config} table_config={this.state.table_config} />}
                            {this.state.contentType === "FORM_TABLES" && <ActionForm form={this.props.form} config={this.state.config} /> }
                            {this.state.contentType === "FORM_TABLES" && this.state.table_configs.map((item,index)=>{
                                return <ActionFormTable form={this.props.form} config={[]} table_config={item.table_config} />
                             })}
                            {this.state.contentType === "FORM_STORE" && <ActionFormStore  js_store={FormJsStore} form={this.props.form} config={this.state.config} store_config={this.state.store_config} />}
                            {this.state.contentType === "FORM_MY_XUAN_JIAN" && <ActionFormMyXuanJian store={FormMyXuanJianStore}  js_store={FormJsStore} form={this.props.form} config={this.state.config} />}
                        </Modal> :
                        <Modal
                            visible
                            width={store.modalConfig["width"] ? store.modalConfig["width"] : 800}
                            {...(store.modalConfig["maskClosable"] !== undefined ? { maskClosable: store.modalConfig["maskClosable"] } : {})}
                            title={store.modalConfig["title"] ? store.modalConfig["title"] : "弹窗标题"}
                            okText={store.modalConfig["okText"] ? store.modalConfig["okText"] : "确定"}
                            cancelText={store.modalConfig["cancelText"] ? store.modalConfig["cancelText"] : "取消"}
                            onCancel={() => store.modalVisible = false}
                            confirmLoading={this.loading}
                            onOk={this.handleFormSubmit}>
                            {
                                store.modalConfig["alert"] &&  <Alert closable showIcon type={store.modalConfig["alert"] && store.modalConfig["alert"]["type"] ? store.modalConfig["alert"]["type"] : "info"} message={store.modalConfig["alert"] && store.modalConfig["alert"]["message"] ? store.modalConfig["alert"]["message"] : "小提示"}
                                                                                 style={{width:store.modalConfig["alert"] && store.modalConfig["alert"]["width"] ? store.modalConfig["alert"]["width"] : 600, margin: '0 auto 20px', color: '#31708f !important'}}
                                                                                 description={store.modalConfig["alert"] && store.modalConfig["alert"]["description"] ? store.modalConfig["alert"]["description"] : "提示信息"}/>
                            }
                            {this.state.contentType === "FORM" && <ActionForm form_store={FormStore} js_store={FormJsStore} form={this.props.form} config={this.state.config} />}
                            {this.state.contentType === "DETAIL" && <ActionDetail config={this.state.config} data={this.state.data}/>}
                            {this.state.contentType === "IMPORT" && <ActionImport url={this.configUri} params={this.configParams} config={this.state.config} data={this.state.data}/>}
                            {this.state.contentType === "RAW" && <FormatRaw record={this.state.data}/>}
                            {this.state.contentType === "FORM_TABLE" && <ActionFormTable form={this.props.form} config={this.state.config} table_config={this.state.table_config} />}
                            {this.state.contentType === "FORM_TABLES" && <ActionForm form={this.props.form} config={this.state.config} /> }
                            {this.state.contentType === "FORM_TABLES" && this.state.table_configs.map((item,index)=>{
                                return <ActionFormTable form={this.props.form} config={[]} table_config={item.table_config} />
                            })}
                            {this.state.contentType === "FORM_STORE" && <ActionFormStore form={this.props.form} js_store={FormJsStore} config={this.state.config} store_config={this.state.store_config} />}
                            {this.state.contentType === "FORM_MY_XUAN_JIAN" && <ActionFormMyXuanJian form_my_xuan_jian_store={FormMyXuanJianStore} js_store={FormJsStore} form={this.props.form} config={this.state.config} />}
                        </Modal>

                }
                {
                    <Modal visible={this.state.visible_test.test}
                           onOk={this.handleOk}
                           onCancel={this.handleCancel}
                           title={this.state.visible_test.data.title}>{this.state.visible_test.data.body}</Modal>
                }
            </Fragment>
        );
    }
}

export default Form.create()(ActionModal)

